<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>shopping</title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link href="../css/app.css" rel="stylesheet"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon icon-back"></a>
        <div class="searchinput"><input type="text" placeholder="搜索"/></div>
        <a class="classifybtn"></a>
    </header>

    <nav class="mui-bar mui-bar-tab indexbotm">
        <a class="reset u-button">重置</a><a class="sure u-button">确定</a>
    </nav>
	<div class="classflytab">
		<div id="segmentedControl" class="mui-segmented-control">
			<a class="mui-control-item mui-active" href="#item1">包款查询</a>
			<a class="mui-control-item" href="#item2">精准查询</a>
			<a class="mui-control-item" href="#item3">编码查询</a>
		</div>
	</div>
	<div class="secondtab">
		<a class="sortbtn"><span>智能</span><i class="arrow"></i></a>
		<a class="active">品牌</a>
		<a>分类</a>
		<a>筛选</a>
		<div class="slidescreen">
			<div class="mask"></div>
			<div class="info">
				<p class="selected">智能</p>
				<p>按时间排序</p>
				<p>价格由低到高</p>
				<p>价格由高到低</p>
			</div>
		</div>
	</div>
    <div class="mui-content bgwhite">
        <ul class="goodslist">
        	<li class="active">
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Acne Stuios艾克妮</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        	<li>
        		<div class="goodsimg"><img src="../images/brand01.png"></div>
        		<p class="goodsname">Aape</p>
        	</li>
        </ul>
    </div>
    
    <script type="text/javascript" src="../js/rem.js" ></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    	$('.sortbtn').click(function(){
    		$('.slidescreen').toggleClass('active')
    		$('.arrow').toggleClass('up')
    	})
    	$('.slidescreen p').click(function(){
    		$('.slidescreen p').removeClass('selected');
    		$(this).addClass('selected');
    		$(this).parents('.slidescreen').removeClass('active')
    		var txt = $(this).text()
    		$('.sortbtn span').text(txt)
    		$('.arrow').removeClass('up')
    	})
    </script>
</body>
</html>